doctype html
html(lang="en")
  head
    title='Scan Annotator'
    meta(charset='UTF-8')
    link(rel='stylesheet', href='//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css')
    link(rel='stylesheet', href='//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css')
    link(rel='stylesheet', href='//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.3/themes/default/style.min.css')
    link(rel='stylesheet', href='//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css')
    link(rel='stylesheet', href=`${baseUrl}/client/js/vendor/jquery-ui/css/opentip.css`)
    link(rel='stylesheet', href=`${baseUrl}/css/common.css`)
    link(rel='stylesheet', href=`${baseUrl}/css/search-panel.css`)
    link(rel='stylesheet', href=`${baseUrl}/css/model-viewer.css`)
    link(rel='stylesheet', href='css/scan-annotator.css')
  body
    #sidebar
      #info Scan Annotator
      #options
        input(type='checkbox', id='newImages')
        label(for='newImages') Use new images
        select#imageIndex(style='display:none')
      #tabs
        ul
          li: a(href='#tabs-1') Search
          li: a(href="#tabs-6") Parts
        #tabs-1
          #searchPanel
        #tabs-6
          #partsPanel
            p#partTypeSelectDiv
              label(for="partType") Part Type
              select#partType
            p#labelTypeSelectDiv
              label(for="labelType") Label
              select#labelType
            p
              #treePanel
            p
              input(type="checkbox", id="keepSegmentColors")
              label(for="keepSegmentColors") Keep segment colors
            p#showSegmentOBBsDiv
              input(type="checkbox", id="showSegmentOBBs")
              label(for="showSegmentOBBs") Show segment OBBs
    #main
      #canvas
        #mouseToolTip.mouse-tooltip
      #namesPanel.overlay.btn-group.btn-group-vertical
        #nameButtonsDiv.btn-group.btn-group-vertical
        #newNameDiv.input-group
          input#addNewNameTextbox.form-control(type='text', placeholder='Add new label...')
          span.input-group-btn
            button#addNewNameBtn.btn.btn-default(type='button') Add
      #alert.alert(style='display:none')
        button.close(type='button', onclick='hideAlert()') &times;
        span#alertMessage
      #instructionsPanel.roundBorder.grayBackground
        span Instructions
        p#instructions
    #customLoadingPanel.roundBorder.grayBackground
      #loadAnnotationsPanel

    script(src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js")
    script(src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js")
    script(src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js")
    script(src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.3/jstree.min.js")
    script(src="//cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js")
    script(src=`${baseUrl}/three.min.js`)
    script(src=`${baseUrl}/scanNet.bundle.js`)
    link(rel='stylesheet', href=`${baseUrl}/css/datgui-light.css`)
    script.
      var tabsDiv = $('#tabs');
      tabsDiv.tabs().css({'min-height': '400px', 'overflow': 'auto'});
      var scanAnnotator = new STK.ScanAnnotator({
        container: document.getElementById('canvas'),
        sources: ['vf'],
        useNewImages: true,
        tabs: ['models', 'parts'],
        loadAnnotationsPanel: '#loadAnnotationsPanel',
        defaultPartSource: 'mpr',
        defaultPartType: 'region',
        partViewerUrl: '#{baseUrl}/scans/segment-annotator-single?modelId=${id}&taskMode=fixup',
        partsPanel: {
          labelsPanel: null
        }
      });
      tabsDiv.bind('tabsactivate', function (event, ui) {
        switch (ui.newPanel.attr('id')) {
          case 'tabs-1':
            scanAnnotator.modelSearchController.onResize();
            break;
        }
      });
      $('#instructions').hide();
      $('#instructionsPanel').click(function () { $('#instructions').toggle(); });
      var defaultSource = 'mp';
      var modelId = scanAnnotator.urlParams['modelId'];
      scanAnnotator.launch();
      scanAnnotator.assetManager.registerCustomAssetGroups({
        assetFiles: STK.Constants.scanAssetsFile,
        filterByAssetId: modelId,
        filterBySource: defaultSource,
        callback: function(err, res) {
          scanAnnotator.searchForAsset(app.modelSearchController, defaultSource, modelId);
        }
      });

      // Make various components draggable
      $('#namesPanel').draggable();
      $('#customLoadingPanel').draggable();
      window.app = scanAnnotator;  // For console debugging
